<template>
	<view class="tabs-screen" id="tabs-screen">
		<view @click="changeTab(item,index)" :id="'tab'+index" :class="tab_current==index?'check':''" class="tabs-screen-item" v-for="(item,index) in list"
			:key="index">
			<view v-if="false" class="item-icon"></view>
			<view class="item-name">
				{{item.name}}
			</view>
		</view>
		<view class="tabs-line" :style="[line_style]"></view>
		
		<view class="tabs-cover-top" :style="[cover_top_style]"></view>
		<view class="tabs-cover-bottom" :style="[cover_bottom_style]"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		getCurrentInstance,
		watch
	} from 'vue'
	const props = defineProps({
		list:{
			default: [],
			type: Array
		}
	})
	

	const tab_current = ref(0)
	const instance = getCurrentInstance();// 组件实例
	const rootDom = ref({}) // 本组件根节点位置数据
	const line_style = ref({}) // 滑块样式
	const cover_top_style = ref({}) // 下方包含块样式
	const cover_bottom_style = ref({}) // 下方包含块样式
	
	watch(()=>props.list,async(newVal,oldVal)=>{
		if(newVal.length>0){
			setTimeout(async()=>{
				await getRootDom()
				tab_current.value = 0
				getDistance(tab_current.value,tab_current.value)
			},300)
			// nextTick(async()=>{
			// 	await getRootDom()
			// 	getDistance(tab_current.value,tab_current.value)
			// })
		}
	})
	
	onMounted(()=>{
		
	})
	
	const emit = defineEmits(['change'])
	
	const changeTab = (item,index) => {
		tab_current.value = index
		getDistance(item,index)
		emit('change',item)
	}
	
	const getRootDom = ()=>{
		return new Promise((resolve,reject)=>{
			uni.createSelectorQuery().in(instance.proxy).select('#tabs-screen').boundingClientRect(data => {
				rootDom.value = data
				resolve(rootDom.value)
			}).exec()
		})
	}

	const getDistance = (item, index) => {
		uni.createSelectorQuery().in(instance.proxy).select('#tab'+index).boundingClientRect(data => {
			console.log(rootDom.value,'rootDom')
			console.log(data,'data')
			
			line_style.value = {
				top : Math.floor( data.top - rootDom.value.top ) + 'px',
				left: '0px',
				height: data.height + 'px',
			}
			
			cover_top_style.value = {
				height: Math.floor( data.top - rootDom.value.top) + 'px',
			}
			cover_bottom_style.value = {
				height: Math.floor( rootDom.value.bottom - data.bottom) + 'px',
			}
		}).exec()
		
	}
</script>

<style lang="scss">
	.tabs-screen {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;

		.tabs-screen-item {
			transition: all 0.5s;
			min-height: 50rpx;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 9;
			
			&.check{
				background-color: transparent;
				color: var(--color);
			}

			.item-icon {
				margin: 0 10rpx;
				height: 100%;
				width: 4rpx;
				border-radius: 10rpx;
				background-color: var(--color);
			}

			.item-name {
				margin-left: 20rpx;
			}
		}

		.tabs-line {
			transition: all 0.5s;
			position: absolute;
			top: 0;
			left: 0rpx;
			height: 100%;
			width: 12rpx;
			transform: scale(0.5);
			border-radius: 10rpx;
			background-color: var(--color);
			z-index: 9;
		}
		
		.tabs-cover-top{
			transition: all 0.5s;
			position: absolute;
			top: 0;
			left: 0rpx;
			width: 100%;
			border-radius: 0 0 20rpx 0;
			background-color: white;
			z-index: 1;
		}
		.tabs-cover-bottom{
			transition: all 0.5s;
			position: absolute;
			bottom: 0;
			left: 0rpx;
			width: 100%;
			border-radius: 0 20rpx 0 0;
			background-color: white;
			z-index: 1;
		}
	}
</style>